<html>
<head>
	<base href="/">
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/base.css">
	<style>
		.layui-table th,.layui-table td{
			text-align: center;
		}
	</style>
</head>
<body>

<div class="page fx-col">
	<div class="noshrink fx">
		<div class="fx-g1 fx align-center layui-form" style="overflow: inherit">
			<select name="examId" id="examId">
				<option value="">选择考试</option>
			</select>
			<select  lay-verify="required|number" id="grade">
				<option value="">选择年级</option>
			</select>
			<select  lay-verify="required|number" id="subject">
				<option value="">选择学科</option>
			</select>
			<button id="search_btn" class="layui-btn ml-10">搜索</button>
		</div>
	</div>

	<div class="fx-g1">
		<table class="layui-table " id="table">
			<thead>
			<tr>
				<th>序号</th>
				<th>年级</th>
				<th>班级</th>
				<th>平均分</th>
				<th>最高分</th>
				<th>最低分</th>
			</tr>
			</thead>
			<tbody id="tbody">
			</tbody>
		</table>

		<div id="chart" style="width: 100%; height: 500px">

		</div>


	</div>



</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script src="assets/js/base.js"></script>
<script src="assets/js/echarts.min.js"></script>
<script>
	let examId = 0;
	async function search() {
		if(!examId) {
			layer.msg("请选择考试", {icon: 2});
			return;
		}
		let gradeId = $("#grade").val();
		if (!gradeId) {
			layer.msg("请选择考试年级", {icon: 2});
			return;
		}
		let subjectId = $("#subject").val();
		if (!subjectId) {
			layer.msg("请选择学科", {icon: 2});
			return;
		}

		$.ajax({
			url: `/score/listGradeStatisticsData?examId=${examId}&gradeId=${gradeId}&subjectId=${subjectId}`,
			dataType:"json",
			success: res => {
				generateTable(res.data);
				generateChart(res.data);
			}

		})

	}

	/**
	 * 生成表格
	 */
	function generateTable(data) {
		let content = data.map((item, i) => `
			<tr>
				<td>${i+1}</td>
				<td>${item.gradeName}</td>
				<td>${item.className}</td>
				<td>${item.avgScore}</td>
				<td>${item.maxScore}</td>
				<td>${item.minScore}</td>
			</tr>
		`).join("");
		$("#tbody").html(content);

	}

	/**
	 * 加载考试
	 */
	function loadExamOptions() {
		$.ajax({
			url: "exam/listAll",
			dataType: "json",
			success(res) {
				let list = res.data;
				list.unshift({id:"", name:"选择考试"});
				var content = list.map(item => {
					return `<option value="${item.id}">${item.name}</option>`
				}).join("");
				$("#examId").html(content);
				layui.form.render('select');
			}
		})
	}
	/**
	 * 加载年级
	 */
	function loadGradeOptions() {
		if(!examId) {
			$("#grade").html("<option value=''>选择年级</option>");
			$("#clazz").html("<option value=''>选择班级</option>");
			layui.form.render('select');
			return;
		}
		$.ajax({
			url: "exam/listExamGrades?examId="+examId,
			dataType: "json",
			success(res) {
				let list = res.data;
				list.unshift({id:"", name:"选择年级"});
				var content = list.map(item => {
					return `<option value="${item.id}">${item.name}</option>`
				}).join("");
				$("#grade").html(content);
				layui.form.render('select');
			}
		})
	}

	/**
	 * 加载学科选项
	 */
	function loadSubjectOptions() {
		var gradeId = $("#grade").val();
		var content = "";
		if (!gradeId) {
			content = '<option value="">选择学科</option>';
			$("#subject").html(content);
			layui.form.render('select');
		} else {
			$.ajax({
				url: "exam/listExamSubjects?examId="+examId+"&gradeId="+$("#grade").val(),
				dataType: "json",
				success(res) {
					let list = res.data;
					list.unshift({id:"", name:"选择学科"});
					list.push({id: -1, name: "总成绩"});
					var content = list.map(item => {
						return `<option value="${item.id}">${item.name}</option>`
					}).join("");
					$("#subject").html(content);
					layui.form.render('select');
				}
			})
		}

	}

	let dom = document.getElementById("chart");
	let chart = echarts.init(dom);
	/**
	 * 处理图表
	 */
	function generateChart(data) {

		let option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				}
			},
			legend: {
				data: ['平均分', '最高分', '最低分']
			},
			xAxis: [
				{
					type: 'category',
					data: data.map(item => item.className),
					axisPointer: {
						type: 'shadow'
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '分数',
					axisLabel: {
						formatter: '{value} 分'
					}
				}
			],
			series: [
				{
					name: '平均分',
					type: 'bar',
					label: {
						show: true,
						position: 'top'
					},
					data: data.map(item => item.avgScore)
				},
				{
					name: '最高分',
					type: 'bar',
					label: {
						show: true,
						position: 'top'
					},
					data: data.map(item => item.maxScore)
				},
				{
					name: '最低分',
					type: 'bar',
					label: {
						show: true,
						position: 'top'
					},
					data: data.map(item => item.minScore)
				}
			]
		};


		chart.setOption(option);
	}



	$(function () {
		$(document).on("click", "#search_btn", function () {
			search();
		}).on("click", "#save_btn", function () {
			let data = $("#form").serialize();
			$.ajax({
				url: "/score/save",
				type: "post",
				data: data,
				dataType: "json",
				success: res=> {
					if(res.success) {
						layer.msg("保存成功", {icon: 1}, function () {
							search();
						});
					} else {
						layer.msg(res.msg, {icon: 2});
					}
				}
			})
		})

		var form = layui.form;
		form.on('select()', function(data){
			if($(data.elem).attr("id") == "grade" ) {
				loadSubjectOptions();
			}
			if($(data.elem).attr("id") == "examId" ) {
				examId = $("#examId").val();
				loadGradeOptions();
			}

		});

		loadExamOptions();
		// loadGradeOptions();


	})
</script>
</html>
